<template>
  <h1>信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>工作种类：{{ person.job.type }}</h2>
  <h2>薪水：{{ person.job.salary }}</h2>
  <h2>新工作：{{ job2.type }}</h2>
  <h2>新工作薪水：{{ job2.salary }}</h2>
  <button @click="changeInfo">修改人的信息</button>
  <h2>测试：{{ job2.a.b.c.d }}</h2>
  <h2>爱好：{{ person.hobby }}</h2>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "App",
  setup(props) {
    let job2 = reactive({
      type: "前端",
      salary: "25k",
      a: {
        b: {
          c: {
            d: "我是老六",
          },
        },
      },
    });
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        type: "技术占",
        salary: "20k",
      },
      hobby: ["跑步", "代码", "摄影"],
    });
    /* 
        refimpl
            ref：reference引用
            impl：implement实现
        引用实现实例对象：————引用对象
            let name = ref("张三");
    */
    function changeInfo() {
      person.name = "李四";
      person.age = 49;
      person.job.type = "全栈";
      person.job.salary = "50k";
      job2.type = "全栈工程师";
      person.hobby[0] = "学习";
    }
    return {
      person,
      job2,
      changeInfo,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
